import Backender from '@/components/Backender';
import { PageContainer, ProLayout } from '@ant-design/pro-components';
import { history, Outlet, useLocation, useModel } from '@umijs/max';
import { Grid, theme } from 'antd';
import { useState } from 'react';
import defaultProps from './adminconfig';
import HeaderDropDown from './components/headerdropdown';

const { useBreakpoint } = Grid;

export default () => {
  const {
    initialState: { currentUser },
  } = useModel('@@initialState');
  const {
    token: { colorBgSecondary, colorBgSeven, colorText, colorPrimary },
  } = theme.useToken();

  const { pathname } = useLocation();
  const screens = useBreakpoint();

  const [dom, setDom] = useState(null);

  return (
    <div
      id="test-pro-layout"
      style={{
        height: '100vh',
      }}
    >
      <ProLayout
        logo={currentUser?.theme !== 'light' ? './logo_dark.png' : './logo.png'}
        siderWidth={216}
        bgLayoutImgList={[
          {
            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
            left: 85,
            bottom: 100,
            height: '303px',
          },
          {
            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
            bottom: -68,
            right: -45,
            height: '303px',
          },
          {
            src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
            bottom: 0,
            left: 0,
            width: '331px',
          },
        ]}
        {...defaultProps}
        location={{
          pathname,
        }}
        avatarProps={{
          src: currentUser?.headUrl,
          title: currentUser?.name,
          size: 'small',
          render: (props, dom) => {
            return <HeaderDropDown>{dom}</HeaderDropDown>;
          },
        }}
        actionsRender={(props) => {
          if (props.isMobile) return [];
          return [<Backender key="1" defaults="backend"></Backender>];
        }}
        menuItemRender={(item, dom) => (
          <div
            onClick={() => {
              history.push(item.path);
            }}
          >
            {dom}
          </div>
        )}
      >
        <PageContainer extra={dom}>
          <div
            className="element"
            style={{
              overflow: 'auto',
              height: `calc(100vh - ${!screens?.md ? '140px' : '78px'})`,
              backgroundColor: colorBgSecondary,
              padding: 12,
            }}
          >
            <Outlet context={{ setDom }}></Outlet>
          </div>
        </PageContainer>
      </ProLayout>
    </div>
  );
};
